<html>
<head>
    <meta charset="UTF-8">
</head>

<style>
    .main{
        width: 40%;
        margin: 20px;
    }
    .top{
        color: gray;
        font:14px "Times New Roman";
        height: 20px;
        padding: 5px;
        border-bottom: lightgray 2px solid;
    }
</style>

<div class="main">
    <!--上面一部分-->
    <div class="top">
        <div style="float: left; font-family: 宋体">
            <img src="1.png">最新动态
        </div>
        <div style="float: right">
            <img src="2.png">设置
        </div>
    </div>

    <style>
        .bottom{
            margin-top: 10px;
            border-bottom: lightgray 2px solid;
        }
    </style>
    <!--下面-->
    <div class="bottom">
        <div style="float:left">
            <img src="4.png"><br>
            <div style="margin-top: 10px; font: 14px 黑体">
                <img src="5.png" style="position: absolute;z-index: -1">6551
            </div>
        </div>
        <div style="overflow: hidden;">
            <img style="float: right" src="3.png">
            热门话题，来自 机械 关注话题
            <div style="color: blue; font: 15px 微软雅黑">人类史上令人叹为观止的极限精度制造成果有哪些？</div>
            <div style="margin: 10px">Vincent Fu，Materials Science,PhD</div>
            <img src="6.png" style="float: left">
            <div style="font: 14px 黑体;margin:10px">
                说到精度，就不得不提在材料学中最重要的一个方面： 表征。要
                项研究一种材料性能，握在手里把玩时远远不够的， 就算你拿出
                放大镜离近了看，也只能看到表面的一些坑坑洼洼， 而为了知晓
                一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），
                如果要获得更深...显示全部
            </div>
            
        </div><div style="margin: 20px 50px">
        <img src="7.png">关注问题
        <img src="8.png">867条评论
        <img src="9.png">作者保留权利
    </div>
    </div>
</div>

</html>